import {Component} from 'react';
// NavLink用来跳转路由 Routes用来存放所有的路由匹配规则 Route定义单个匹配规则
import {NavLink,Routes,Route,Link} from 'react-router-dom'
/* 
 navLink与link组件的区别：都可以用来进行路由跳转，不同的是NavLink默认会给当前切换的路由添加选中状态，而Link不会
*/
import Home from './views/Home';
import Mine from './views/Mine';
import Cart from './views/Cart';
class App extends Component{
    render(){
        return(
            <div>
                <h1>路由的基本使用</h1>
                {/* to 属性表示要跳转的路由路径 */}
                <NavLink to='/home'>首页</NavLink> | <NavLink to='/mine'>我的</NavLink> |
                <Link to='/cart'>购物车</Link>
                <Routes>
                    {/* path 表示匹配规则 element表示匹配规则所对应要展示的组件 */}
                    <Route path='/home' element={<Home/>}></Route>
                    <Route path='/mine' element={<Mine/>}></Route>
                    <Route path='/cart' element={<Cart/>}></Route>
                </Routes>
            </div>
        )
    }
}
export default App;